<template>
	<view class="container">
		<navbar title="申请售后"></navbar>
		<view class="loading-page" v-if='loadingPage'>
			<load-page></load-page>
		</view>
		<view class="wrap" v-else>
			<view class="base-wrap">
				<view class="title">售后类型</view>
				<view class="sale-tab-type">
					<view class="sale-tab-item line-center" :class="[form.type == 10 ? 'sale-tab-item-act':'']">退货退款</view>
					<!-- <view class="sale-tab-item line-center">换货服务</view> -->
				</view>
			</view>
			<view class="base-wrap">
				<view class="order-wrap">
					<view class="order-sn">订单编号：{{orderGoodsItem.orderM.order_no}} </view>
					<view class="order-item">
						<apply-goods-item :item='orderGoodsItem'></apply-goods-item>
					</view>
				</view>
			</view>
			<view class="base-wrap">
				<view class="title">退款原因</view>
				<view class="ques-wrap">
					<textarea placeholder="请在此填写退款原因" placeholder-style="color:#B3B0B0;font-size:28rpx" v-model="form.content"></textarea>
					<view class="upload-file">
						<zlxls-upload-img ref="zlxlsUploadImg" @uploaded="uploaded" :imgList="imgList" :maxCount="9"
							:autoUpload='true' :tapModel="'replace'" :header="header"
							:uploadUrl="uploadUrl"></zlxls-upload-img>
					</view>
				</view>
			</view>
			<view class="tip">提交服务单后，客服人员可能与您进行沟通，请保持手机畅通</view>
		</view>
		<view class="footer">
			<view class="footer-btn">
				<button class="btn line-center" :disabled="isDisabled" :loading="isDisabled" @tap='submit'>{{btnText}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import applyGoodsItem from '../components/apply-goods-item.vue';
	import zlxlsUploadImg from "@/components/zlxls-upload-img/zlxls-upload-img.vue";
	export default {
		components:{
			applyGoodsItem,
			zlxlsUploadImg
		},
		data() {
			return {
				orderGoodsItem:{},
				form:{
					orderGoodsId:'',
					type:10,
					content:'',
					images:[]
				},
				uploadUrl: '',
				header: {},
				loadingPage:true,
				isDisabled:false,
				btnText:'提交'
			};
		},
		onLoad(option) {
			this.form.orderGoodsId = option.order_goods_id ? option.order_goods_id : '';
		    this.header = {
		    	"Authorization": uni.getStorageSync('TOKEN') ? uni.getStorageSync('TOKEN') : ""
		    };
			this.uploadUrl = `${app.globalData.hostUrl}/${app.getApi().baseApi.upload}`;
			console.log('uploadUrl',this.uploadUrl)
			this.getOrderDetail()
		},
		methods:{
			getOrderDetail() {
				const that = this;
				app.globalRequest({
					api: app.getApi().order.getOrderItem,
					data: {
						order_goods_id: that.form.orderGoodsId
					}
				}).then(res => {
					that.loadingPage = false;
					if (res.code == 0) {
						console.log('res.data.order_pay_money',res.data.order_pay_money)
						res.data.order_pay_money = parseFloat(res.data.order_pay_money).toFixed(2);
						that.orderGoodsItem = res.data;
					}
				})
			},
			uploaded(_res) {
				this.form.images = _res.allImages.join("|")
			},
			submit(){
				const that = this;
				if(!that.form.content){
					uni.showToast({
						title:'请填写退款原因',
						icon:'none',
						mask:true
					})
					return;
				}
				that.isDisabled = true;
				that.btnText = '提交中,请稍候...';
				app.globalRequest({
					api: app.getApi().order.refundApply,
					method:'POST',
					data:that.form
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
						this.isDisabled = false;
						this.btnText = '提交';
						const pages = getCurrentPages(); // 当前页面
						const beforePage = pages[pages.length - 2]; // 前一个页面
						console.log("beforePage", beforePage);
						beforePage.$vm.getOrderDetail();
						uni.navigateBack({
							delta:1
						})
					}else{
						this.isDisabled = false;
						this.btnText = '提交';
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.base-wrap{
		margin:24rpx 24rpx 0;
		padding:30rpx 24rpx;
		background: #fff;
		.title{
			font-weight: bold;
			font-size: 28rpx;
		}
		
	}
	.sale-tab-type{
		display: flex;
		margin-top:24rpx;
		.sale-tab-item{
			margin-right: 30rpx;
			width: 200rpx;
			height: 68rpx;
			background: #FFFFFF;
			border-radius: 34rpx;
			border: 2rpx solid #707070;
			box-sizing: border-box;
		}
		.sale-tab-item-act{
			border: 2rpx solid #5DC751;
			color:#52B148;
		}
	}
	.order-item{
		margin-top:16rpx;
	}
	.ques-wrap{
		width: 100%;
		min-height: 466rpx;
		background: #F6F6F6;
		border-radius: 8rpx;
		margin-top:24rpx;
		padding:0 20rpx 20rpx;
		box-sizing: border-box;
		textarea{
			width: 100%;
			padding:18rpx 0;
			box-sizing: border-box;
		}
	}
	.tip{
		color: #44C082;
		line-height: 48rpx;
		text-align: center;
		font-size: 24rpx;
		padding-top:52rpx;
	}
	.footer{
		width: 100%;
		height: 110rpx;
		background: transparent;
		position: fixed;
		left:0;
		bottom:0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
		z-index:2;
		.footer-btn{
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			.btn{
				width: 640rpx;
				height: 94rpx;
				background: #52B148;
				border-radius: 48rpx;
				font-size: 32rpx;
				color: #fff;
			}
		}
	}

</style>
